<template>
  <div class="tp-org-index" :style="{width: width+'px'}">
    <tp-org-row>
      <tp-org-col :span="24">
        <tp-org-box
          :data="data"
        ></tp-org-box>
      </tp-org-col>
    </tp-org-row>
    <tp-org-items v-if="data[propsKey.children] && data[propsKey.children].length" :data="data" :width="width"></tp-org-items>
  </div>
</template>

<script>
import TpOrgRow from './row-col/Row';
import TpOrgCol from './row-col/Col';
import TpOrgItems from './items/Items';
import TpOrgBox from './items/Box';
export default {
  name: 'TpOrg',
  components: { TpOrgRow, TpOrgCol, TpOrgItems, TpOrgBox },
  provide() {
    return {
      style: {
        strokeWidth: this.strokeWidth,
        strokeColor: this.strokeColor,
        vspace: this.vspace,
        strokeRadius: this.strokeRadius,
        itemWidth: this.itemWidth,
        itemHeight: this.itemHeight,
        itemBgColor: this.itemBgColor,
        fontSize: this.fontSize,
        color: this.color,
        hoverClass: this.hoverClass,
        btns: this.btns,
        onlyShow: this.onlyShow
      },
      top: this
    }
  },
  data() {
    return {
      refresh: false
    }
  },
  methods: {
    toRefresh() {
      this.refresh = !this.refresh;
    }
  },
  props: {
    /**
     * {
     *  label: '',
     *  value: '',
     *  children: []
     * }
     */
    data: {
      type: Object,
      require: true
    },
    propsKey: {
      type: Object,
      default: _ => ({
        label: 'label',
        value: 'value',
        children: 'children'
      })
    },
    width: {
      type: Number,
      required: true
    },
    strokeWidth: {
      type: Number,
      default: 1
    },
    strokeColor: {
      type: String,
      default: '#409eff'
    },
    vspace: {
      type: Number,
      default: 30,
      validator: function(value) {
        return value >= 20;
      }
    },
    strokeRadius: {
      type: Number,
      default: 5
    },
    itemWidth: {
      type: String,
      default: '100px'
    },
    itemHeight: {
      type: String,
      default: '44px'
    },
    itemBgColor: {
      type: String,
      default: 'white'
    },
    fontSize: {
      type: String,
      default: '14px'
    },
    color: {
      type: String,
      default: '#409eff'
    },
    /**
     * [
     *  {
     *    label: '',
     *    icon: '',
     *    callback: function () {}
     *  }
     * ]
     */
    btns: Array,
    onlyShow: {           //只做显示作用
      type: Boolean,
      default: false
    },
    hoverClass: String    // 此属性中样式，需要加入 !important限定
  }
}
</script>